<template>
    <div class="loginContainer">
        <el-button plain type="text" style="position:absolute;left:20px;top:20px;font-size:18px;"
            @click="back">返回</el-button>
        <div class="formBOX">
            <div style="font-weight:600;font-size:24px;margin-bottom:20px;">three.js的使用</div>
            <canvas id="three"></canvas>
        </div>
    </div>
</template>
<!-- three.js -->
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import * as THREE from 'three'

// 创建场景
const initThree = () => {
    // 场景
    const scene = new THREE.Scene()
    scene.background = new THREE.Color('#eee')
    // 容器
    const canvas = document.querySelector('#three')
    // 渲染
    const renderer = new THREE.WebGLRenderer({ canvas, antialias: true })
    // 相机
    const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000)

    // 画线
    const material = new THREE.LineBasicMaterial({ color: 0x0000ff });
    const points: any = [];
    points.push(new THREE.Vector3(- 10, 0, 0))
    points.push(new THREE.Vector3(0, 10, 0))
    points.push(new THREE.Vector3(10, 0, 0))
    const geometry = new THREE.BufferGeometry().setFromPoints(points)
    const line = new THREE.Line(geometry, material)
    scene.add(line)

    camera.position.z = 100
    function animate() {
        renderer.render(scene, camera)
        requestAnimationFrame(animate)
    }
    animate()
}

onMounted(() => {
    initThree()
})

const back = async () => {
    window.history.back()

}
</script>
<style lang="scss" scoped>
.loginContainer {
    height: 100vh;
    width: 100vw;
    padding: 60px;
    margin-bottom: 10px;
    cursor: pointer;
    box-sizing: border-box;
}

#three {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}
</style>
